<template>
  <el-dialog :title="form.orderId ? '编辑' : '新增'" v-model="visible"
    :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px" v-loading="loading">
        <el-row :gutter="24">
<!--          <el-col :span="12" class="mb20">-->
<!--            <el-form-item label="订单号" prop="orderCode">-->
<!--             <el-input v-model="form.orderCode" placeholder="请输入订单号"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

          <el-col :span="12" class="mb20">
            <el-form-item label="客户姓名" prop="customerId">
              <el-select
                  v-model="form.customerId"
                  placeholder="请选择客户姓名"
                  clearable
                  filterable
              >
                <el-option
                    v-for="customer in customerNameList"
                    :key="customer.customerId"
                    :value="customer.customerId"
                    :label="customer.customerName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
             <el-form-item label="车辆编号" prop="infoId">
               <el-select
                   v-model="form.infoId"
                   placeholder="请选择车辆编号"
                   clearable
                   filterable
               >
                 <el-option
                     v-for="car in carCodeList"
                     :key="car.infoId"
                     :value="car.infoId"
                     :label="car.carCode"
                 />
               </el-select>
             </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
             <el-form-item label="销售日期" prop="saleDate">
<!--               <el-date-picker-->
<!--                   clearable-->
<!--                   v-model="form.saleDate"-->
<!--                   type="datetime"-->
<!--                   value-format="yyyy/MM/dd HH:mm:ss"-->
<!--                   placeholder="请选择销售日期">-->
<!--               </el-date-picker>-->
               <el-date-picker
                   v-model="form.saleDate"
                   type="datetime"
                   placeholder="请选择销售日期"
                   format="YYYY-MM-DD HH:mm:ss"
                   value-format="YYYY-MM-DD HH:mm:ss"
               />
             </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
             <el-form-item label="销售价格" prop="salePrice">
               <el-input v-model="form.salePrice" placeholder="请输入销售金额"/>
             </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="OrderDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import {  addObj,cusName,carCode} from '/@/api/qc/carOrder'
import { rule } from '/@/utils/validate';
import { nextTick, ref, reactive } from 'vue';

const emit = defineEmits(['refresh']);
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
// 提交表单数据
const form = reactive({
		orderId: '',
	  orderCode: '',
    customerName: '',
    phone: '',
    identityCard: '',
    carCode: '',
	  salePerson: '',
    saleDate: null,
	  salePrice: '',
    infoId: '',
    customerId:'',
});
// 客户姓名列表
const customerNameList = ref<string[]>([]);
//车辆编号列表
const carCodeList = ref<any[]>([]);
// 定义校验规则
const dataRules = ref({
        // orderCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // customerName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // carCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // salePerson: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // saleDate: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // salePrice: [
        //   { required: true, message: '不能为空', trigger: 'blur' },
        //   { validator: rule.number, trigger: 'blur' }
        // ],
});
// 获取客户姓名列表
const loadCusNameList = async () => {
  const result = await cusName();
  console.log('customer',result.data)
  customerNameList.value = result.data;
};
loadCusNameList();
//获取车辆编号列表
const loadCarCodeList = async () => {
  const result = await carCode();
  console.log('car',result.data)
  carCodeList.value= result.data;
}
loadCarCodeList();
// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true;
  form.orderId = '';
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });
  // 获取order信息
  if (id) {
    form.orderId = id;
    getorderData(id);
  }
};
// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {});
  if (!valid) return false;
  try {
    loading.value = true;
    await addObj(form);
    useMessage().success('添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};
// 初始化表单数据
const getorderData = (id: string) => {
  // 获取数据
  loading.value = true;
  // 假设有一个获取订单数据的方法 getObj
  // getObj(id).then((res: any) => {
  //   Object.assign(form, res.data);
  // }).finally(() => {
  //   loading.value = false;
  // });
  // 这里暂时注释掉，你需要实现这个方法
};
onMounted(() => {
  loadCarCodeList();
});
// 暴露变量
defineExpose({
  openDialog
});
</script>
